<template>
  <div id="box" class="component-wrap">
    <div class="box" @click="goDetail(item)">
      <h2>盘点单号-{{item.checkNum}}</h2>
      <ul class="box-info">
        <li class="clearfix">
          <img src="../../assets/ic_date_found@3x.png" />
          <span>创建时间：</span>
          <span class="box-info-right">{{item.createTime}}</span>
        </li>
        <li class="clearfix">
          <img src="../../assets/ic_admin_found@3x.png" />
          <span>创建人：</span>
          <span class="box-info-right">{{item.creator}}</span>
        </li>
        <li class="clearfix">
          <img src="../../assets/ic_admin_check@3x.png" />
          <span>盘点人：</span>
          <span class="box-info-right">{{item.checker}}</span>
        </li>
      </ul>
      <ul class="box-nav">
        <li>未盘<span>{{item.unCheck}}</span></li>
        <li>已盘<span>{{item.hasCheck}}</span></li>
        <li>盘盈<span>{{item.inventory}}</span></li>
      </ul>
      <div class="box-btn" v-if="item.checkStatus==='未盘点'">开始盘点</div>
      <span class="circle circle-left"></span>
      <span class="circle circle-right"></span>
      <img src="../../assets/label_uncounts@3x.png" class="box-status" v-if="item.checkStatus==='未盘点'"/>
      <img src="../../assets/label_completed@3x.png" class="box-status" v-if="item.checkStatus==='已完成'"/>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "CheckBox",
    props: [ "item" ],
    methods: {
      goDetail:function(i){
        this.$router.push({ path: '/home/check/checkDetailManagement',query: {
          checkNum: i.checkNum,
          creator: i.creator,
          checker: i.checker,
          createTime: i.createTime,
          unCheck: i.unCheck,
          hasCheck: i.hasCheck,
          checkStatus: i.checkStatus,
          inventory: i.inventory
        }})
      }
    }
  }
</script>

<style scoped>
  #box .box ul.box-nav {
    display: flex;
    width: 95%;
    margin: 0 auto;
    padding: 0.8rem 0;;
    font-size: 1.4rem;
    color: #171717;
    border-top: 1px dashed #eee;
  }
  #box .box ul.box-nav li {
    flex: 1;
    text-align: center;
  }
  #box .box ul.box-nav li span {
    color: #0CC;
    margin-left: 0.3rem;
  }
  #box .box .box-btn {
    width: 81%;
    padding: 0.6rem 0;
    margin: 0.5rem auto;
    text-align: center;
    border: 1px solid #00CCCC;
    -webkit-border-radius: 2.2rem;
    -moz-border-radius: 2.2rem;
    -ms-border-radius: 2.2rem;
    -o-border-radius: 2.2rem;
    border-radius: 2.2rem;
    font-size: 1.4rem;
    color: #00CCCC;
    cursor: pointer;
  }
</style>
